<template>
  <div>
      <div 
    class="item"
   v-for=" m in list"
    >
      <div class="img">
        <img :src="m.verticalPic" alt="" />
      </div>
      <div class="title">
        <h1>{{m.name}}</h1>
        <h2>{{m.showTime}}</h2>
        <h3>{{m.cityName}}|{{m.venueName}}</h3>
        <div class="button">可选座</div>

        <div class="price">￥<span>{{m.priceLow}}</span>起</div>
      </div>
      <div class="score">{{m.itemScore}}</div>
    </div>
  </div>
</template>

<script>
export default {
    props: ['list']
}
</script>

<style lang='stylus' scoped>
@import '../assets/ellipsis.styl';

.container {
  .item {
    display: flex;
    padding: 0 0.3rem 0.27rem 0.21rem;
    
    .img {
      padding-right: 0.12rem;

      img {
        width: 1.01rem;
        height: 1.36rem;
      }
    }

    .title {
      flex: 1;
      

      h1 {
        font-size: 0.18rem;
        color: #000;
      }

      h2 {
        font-size: 0.12rem;
        font-weight: 100;
        color: #9c9ca4;
      }

      h3 {
        font-size: 0.14rem;
        font-weight: 100;
        color: #9c9ca4;
      }

      .button {
        width: 0.41rem;
        height: 0.12rem;
        font-size: 0.09rem;
        color: #6d7996;
      }

      .price {
        font-size: 0.12rem;
        margin-top 0.3rem
      }

      span {
        font-size: 0.16rem;
        color: #ea416b;
      }
    }
  }
}
</style>